<template>
  <div>
    <!-- 
    <div class="vux-x-input weui-cell">
      <div class="weui-cell__hd">

        <label for="vux-x-input-hkut7" class="weui-label" style="width: 6em;">
          <span style="red">业主名</span>
        </label>

      </div>
      <div class="weui-cell__bd weui-cell__primary">
        <input id="vux-x-input-hkut7" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"
          placeholder="业主名" class="weui-input">

      </div>
      <div class="weui-cell__ft">
        <i class="weui-icon weui_icon_clear weui-icon-clear" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_warn weui-icon-warn" title="" style="display: none;"></i>

        <i class="weui-icon weui_icon_success weui-icon-success" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_success weui-icon-success" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_warn weui-icon-warn" style="display: none;"></i>
      </div>
      <div class="vux-toast">
        <div class="weui-mask_transparent" style="display: none;"></div>
        <div class="weui-toast weui-toast_text" style="width: auto; display: none;">
          <i class="weui-icon-success-no-circle weui-icon_toast" style="display: none;"></i>
          <p class="weui-toast__content" style="padding: 10px;"></p>
        </div>
      </div>
    </div> -->

    <div class="vux-x-input weui-cell">
      <div class="weui-cell__hd">
        <label for="vux-x-input-8adwg" class="weui-label" style="width: 6em;">
          <span style="red">具体地址</span>
        </label>
        <!---->
      </div>
      <div class="weui-cell__bd weui-cell__primary">
        <input id="suggestId" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text" name="address_detail"
          placeholder="小区/写字楼/地址" class="weui-input" >
        <input v-model="locationstr">
      </div>
      <div class="weui-cell__ft">
        <i class="weui-icon weui_icon_clear weui-icon-clear" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_warn weui-icon-warn" title="" style="display: none;"></i>

        <i class="weui-icon weui_icon_success weui-icon-success" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_success weui-icon-success" style="display: none;"></i>
        <i class="vux-input-icon weui-icon weui_icon_warn weui-icon-warn" style="display: none;"></i>
      </div>
    </div>
    <div id="allmap"></div>

  </div>
</template>

<script>
  import {
    MP
  } from "../api/map"

  export default {
    data() {
      return {
        locationstr:"", 
        address_detail: null, //详细地址
        userlocation: {
          lng: "",
          lat: ""
        },
      }
    },
    created() {
      this.loadMap()
    },
    watch: {
      locationstr: function (val, oldval) {
        console.log(this.locationstr)
      }
    },
    methods: {
      loadMap: function () {
        // setTimeout(this.ready, 0)  
      },
      ready: function () {
        MP("1dc945a0a163df56ebdb6bd6433bba5c").then(BMap => {
          var th = this
          var map = new BMap.Map("allmap"); // 创建Map实例
          var point = new BMap.Point(121.622, 31.257); // 创建点坐标
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom();
          var ac = new BMap.Autocomplete( //建立一个自动完成的对象
            {
              "input": "suggestId",
              "location": map
            })
          var myValue
          ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            // console.log(_value)
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.address_detail = myValue
            this.locationstr = myValue
            // this.chageval(myValue)
            //  console.log(this.address_detail)
            setPlace();
          });

          // this.$emit('changecart', this.address_detail)

          function setPlace() {
            map.clearOverlays(); //清除地图上所有覆盖物
            function myFun() {
              th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
          }
        })
      },
      chageval(val){
          this.address_detail = val
      },
    },
    mounted() {
      this.ready()
      // this.$nextTick(function () {
      //   MP("1dc945a0a163df56ebdb6bd6433bba5c").then(BMap => {
      //     var th = this
      //     var map = new BMap.Map("allmap"); // 创建Map实例
      //     var point = new BMap.Point(121.622, 31.257); // 创建点坐标
      //     map.centerAndZoom(point, 15);
      //     map.enableScrollWheelZoom();
      //     var ac = new BMap.Autocomplete( //建立一个自动完成的对象
      //       {
      //         "input": "suggestId",
      //         "location": map
      //       })
      //     var myValue
      //     ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
      //       var _value = e.item.value;
      //       console.log(_value)
      //       myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
      //       this.address_detail = myValue
      //       setPlace();
      //     });

      //     function setPlace() {
      //       map.clearOverlays(); //清除地图上所有覆盖物
      //       function myFun() {
      //         th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
      //         map.centerAndZoom(th.userlocation, 18);
      //         map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
      //       }
      //       var local = new BMap.LocalSearch(map, { //智能搜索
      //         onSearchComplete: myFun
      //       });
      //       local.search(myValue);
      //     }
      //   })
      // })
    }
  }

</script>
